<template>
  <div class="tag-require-normal" v-loading="loading">
    <div :class="{ 'download-table': isDownload || isRessign }">
      <tag-content-header add search refresh @toolFun="toolFun" :settingData="columns">
        <template #title>
          <span>标签需求列表</span>
        </template>
        <template #toolsPre>
          <el-radio-group v-model="listType">
            <el-radio label="userHandleList">等我处理</el-radio>
            <el-radio label="userRequireList">我提交的</el-radio>
            <el-radio label="pageList">全部</el-radio>
          </el-radio-group>
          <el-tooltip effect="dark" content="导出标签" placement="top" slot="reference">
            <el-button type="primary" plain circle @click="toggleDownload">
              <icon-svg name="iconDownload"></icon-svg>
            </el-button>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="批量更换审批人"
            placement="top"
            slot="reference"
            v-if="listType === 'userHandleList'"
          >
            <el-button type="primary" plain circle @click="toggleRessign">
              <icon-svg name="iconResponse"></icon-svg>
            </el-button>
          </el-tooltip>
        </template>
      </tag-content-header>
      <tag-table
        ref="table"
        @refresh="getList"
        :data="dataList"
        :columns="columns"
        :params="params"
        :total="totalSize"
        @rowClick="rowClick"
        :selection="isDownload || isRessign"
        rowKey="tagId"
      >
        <template #requirerNnm="{ scope }">
          {{ $name(scope.row, 'requirerNnm', 'requirer') }}
        </template>
        <template #tagStatus="{ scope }">
          <span
            class="circle"
            :class="{ red: scope.row.tagStatus === '0', grey: scope.row.requireScheduleDt == '2999-12' }"
          ></span>
          {{ scope.row.requireScheduleDt == '2999-12' ? '待确定' : scope.row.tagStatus === '0' ? '延期' : '正常' }}
        </template>
        <template #requireType="{ scope }">
          <span class="circle" :class="{ red: scope.row.requireType === '0' }"></span>
          {{ scope.row.requireType === '0' ? '新增' : '改造' }}
        </template>
        <template #requireScheduleDt="{ scope }">
          {{ scope.row.requireScheduleDt.indexOf('2999') >= 0 ? '' : scope.row.requireScheduleDt }}
        </template>
        <template #handlerNnm="{ scope }">
          {{ scope.row.handleType === 1 ? $name(scope.row, 'handlerNnm', 'handler') : scope.row.handleTeamNm }}
        </template>
      </tag-table>
      <el-button type="primary" size="medium" class="download-btn" v-if="isDownload" @click="downloadResult">
        确定导出
      </el-button>
      <el-button type="primary" size="medium" class="download-btn" v-if="isRessign" @click="changeHandler">
        确定更换
      </el-button>
    </div>
    <creation-selection ref="creationSelection" :selections="selections" @select="selectWay"></creation-selection>
    <require-single ref="requireSingle" @callback="getList"></require-single>
    <require-batch ref="requireBatch" @callback="getList"></require-batch>
    <user-selection ref="userSelection" :nodeId="35" @callback="confirmChangeHandler"></user-selection>
  </div>
</template>

<script>
import creationSelection from '@/components/tag-creation-selection'
import requireSingle from './single/require-single'
import requireBatch from './batch/require-batch'
import userSelection from '../../../components/tag-user-selection'
export default {
  components: {
    creationSelection,
    requireSingle,
    requireBatch,
    userSelection
  },
  data() {
    return {
      listType: 'userHandleList',
      selections: {
        title: '如何新增需求？',
        single: {
          head: '在线登记一个标签需求',
          content:
            '在线填写标签名称、标签故事、标签业务口径及上线平台等标签需求信息。经标签需求部门及IT开发部门审批后进行标签开发。'
        },
        batch: {
          head: '通过登记模板批量导入多个标签需求',
          content: '下载并填写需求登记模板，一次性导入多个标签需求。经过标签需求部门及IT开发部门审批后进行标签开发。'
        }
      },
      loading: false,
      dataList: [],
      columns: [
        {
          show: true,
          label: '需求名称',
          prop: 'tagNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '开发状态',
          prop: 'tagStage',
          search: true,
          searchKey: '',
          searchType: 'select',
          searchList: [
            { key: '需求提出', value: '需求提出' },
            { key: '部门审核', value: '部门审核' },
            { key: '需求初审', value: '需求初审' },
            { key: '需求复审', value: '需求复审' },
            { key: '需求澄清', value: '需求澄清' },
            { key: '需求开发', value: '需求开发' },
            { key: '标签验证', value: '标签验证' },
            { key: '需求验收', value: '需求验收' },
            { key: '已验收', value: '已验收' }
          ],
          dot: {
            需求提出: '#ff99c3',
            部门审核: '#f7a648',
            需求初审: '#8b6cf3',
            需求复审: '#50abdf',
            需求澄清: '#f6bd16',
            需求开发: '#ff00ff',
            标签验证: '#7fffaa',
            需求验收: '#2e6be6',
            已验收: '#52cea7'
          },
          align: 'center'
        },
        {
          show: true,
          label: '状态',
          prop: 'tagStatus',
          search: true,
          searchKey: '',
          searchType: 'select',
          searchList: [{ key: '正常', value: '1' }, { key: '延期', value: '0' }, { key: '待确定', value: '-1' }],
          align: 'center'
        },
        {
          show: true,
          label: '排版',
          prop: 'requireScheduleDt',
          search: true,
          searchKey: '',
          searchType: 'month',
          align: 'center'
        },
        {
          show: true,
          label: '类型',
          prop: 'requireType',
          search: true,
          searchKey: '',
          searchType: 'select',
          searchList: [{ key: '改造', value: '1' }, { key: '新增', value: '0' }],
          align: 'center'
        },
        {
          show: true,
          label: '需求创建时间',
          prop: 'submitTm',
          search: true,
          searchKey: '',
          searchType: 'daterange',
          align: 'center'
        },
        {
          show: true,
          label: '处理人/处理团队',
          prop: 'handlerNnm',
          search: true,
          searchKey: '',
          align: 'center'
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0,
      isDownload: false,
      isRessign: false
    }
  },
  watch: {
    listType() {
      if (this.isDownload) this.$refs.table.clearSelect()
      this.getList()
    },
    isDownload(val) {
      if (!val) this.$refs.table.clearSelect()
    },
    isRessign(val) {
      if (!val) this.$refs.table.clearSelect()
    }
  },
  created() {
    this.getList()
  },
  methods: {
    rowClick(row) {
      if (row.tagId) {
        if (row.requireType === '0') this.handleEdit(row)
        else this.handleChange(row)
      }
    },
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl(`ast/astTagRequireManager/${this.listType}`),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'add':
          if (this.isDownload || this.isRessign) return
          this.$refs.creationSelection.showDialog()
          break
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          if (this.isDownload || this.isRessign) this.$refs.table.clearSelect()
          this.getList()
          break
      }
    },
    selectWay(way) {
      this.$refs[`require${way}`].showDrawer()
    },
    handleEdit(item) {
      this.$refs.requireSingle.showDrawer(item)
    },
    handleChange(item) {
      if (item.tagId) this.handleEdit(Object.assign({}, item, { isChange: true }))
    },
    downloadResult() {
      let selectedRow = this.$refs.table.getSelectList()
      if (!selectedRow.length) {
        this.$message.error('请选择需要导出的标签！')
        return
      }
      let tagList = []
      selectedRow.forEach(item => {
        tagList.push(item.tagId)
      })
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagRequireManager/download'),
        method: 'post',
        data: this.$ajax.setData({
          tagList
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$dlFile(data.data)
          this.$message.success(data.msg)
          this.$refs.table.clearSelect()
          this.isDownload = false
        } else {
          this.$message.error(data.msg)
        }
        this.loading = false
      })
    },
    toggleDownload() {
      this.isRessign = false
      this.isDownload = !this.isDownload
    },
    toggleRessign() {
      this.isDownload = false
      this.isRessign = !this.isRessign
    },
    changeHandler() {
      this.$refs.userSelection.showDialog()
    },
    confirmChangeHandler(handlerId) {
      if (handlerId) {
        let selectedRow = this.$refs.table.getSelectList()
        if (!selectedRow.length) {
          this.$message.error('请选择需要更换的标签！')
          return
        }
        let tagList = []
        selectedRow.forEach(item => {
          tagList.push({
            tagId: item.tagId,
            requireType: item.requireType
          })
        })
        this.loading = true
        this.$ajax({
          url: this.$ajax.setUrl('ast/astTagRequire/batchReAssignHandler'),
          method: 'post',
          data: this.$ajax.setData({
            assetIds: tagList,
            nowHandler: handlerId,
            procId: 1
          })
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$message.success(data.data || data.msg)
            this.$refs.table.clearSelect()
            this.isRessign = false
            this.getList()
          } else {
            this.$message.error(data.data || data.msg)
          }
          this.loading = false
        })
      }
    }
  }
}
</script>

<style lang="scss">
.tag-require-normal {
  position: relative;
  .download-btn {
    position: absolute;
    right: 10px;
    bottom: 0;
  }
  .download-table {
    .el-pagination {
      margin-right: 100px;
    }
    .addBtn {
      border-color: #939393;
      background-color: #909399;
    }
  }
  .operation-button-box {
    text-align: center;
  }
}
</style>
